<template>
  <div id="study">
    <Tabs type="card"
          @on-click="tabclick">
      <TabPane :label="this.roleId==2?'教学日志':'我的笔记'">
        <div v-if="currentIndex===0">
          <Form ref="formValidate"
                :model="form"
                label-position="left"
                :label-width="80">
            <Row>
              <Col span="8">
              <FormItem label="课程名称">
                <Input placeholder="课程名称"
                       class="name"
                       clearable
                       v-model="form.courseName"></Input>
              </FormItem>
              </Col>
              <Col span="16">
              <FormItem label="上课时间段">
                <DatePicker type="datetimerange"
                            v-model="form.time"
                            placeholder="选择时间范围"
                            style="width: 200px"></DatePicker>
              </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="8">
              <FormItem label="课程类型">
                <Select clearable
                        v-model="form.courseType"
                        style="width:200px">
                  <Option v-for="item in courseTypeOption"
                          :value="item.value"
                          :key="item.value">{{ item.label }}</Option>
                </Select>
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem label="填写状态"
                        @on-clear="statusClear">
                <Select clearable
                        v-model="form.status"
                        style="width:200px">
                  <Option v-for="item in options"
                          :value="item.value"
                          :key="item.value">{{ item.label }}</Option>
                </Select>
              </FormItem>
              </Col>
              <Col span="8">
              <FormItem>
                <Button type="primary"
                        @click="getDataList">查询</Button>
                <Button @click="resetForm('formValidate')">重置</Button>
              </FormItem>
              </Col>
            </Row>
          </Form>
          <Table :loading="dataListLoading"
                 border
                 :columns="columns"
                 :data="data"></Table>
          <div class="page">
            <Page @on-change="currentChangeHandle"
                  :total="totalPage"
                  :page-size="pageSize" />
          </div>
        </div>
      </TabPane>
      <TabPane v-if="roleId==2"
               :label="roleId==2?'教学成果':'我的课堂'">
        <resources2 v-if="currentIndex===1"></resources2>
      </TabPane>
      <TabPane label="课程管理"
               v-if="roleId==2">
        <CourseManagement2 v-if="currentIndex===2"
                           @createCourseDone="getDataList" />
      </TabPane>
    </Tabs>
    <editNotes ref="editNotes"
               @refreshDataList="getDataList"
               :title="roleId=='3'?'编辑笔记':'编辑日志'"></editNotes>
  </div>
</template>
<script>
import resources2 from './resources2'
import { dateFormat } from '@/libs/tools.js'
import editNotes from './edit-notes'
import { getDataList, queryTeachingJournal } from '@/api/data.js'
import { mapState } from 'vuex'
import CourseManagement2 from './study-components/course-management2'
export default {
  data () {
    return {
      form: {
        courseName: '',
        time: [],
        status: '',
        courseType: ''
      },
      data: [],
      options: [
        {
          value: '0',
          label: '未编写'
        },
        {
          value: '1',
          label: '已编写'
        }
      ],
      courseTypeOption: [
        {
          value: '0',
          label: '普通教学'
        },
        {
          value: '1',
          label: '案例联席'
        }
      ],
      // 选项卡选中标识
      currentIndex: 0,
      pageIndex: 1,
      pageSize: 5,
      totalPage: 0,
      dataListLoading: false
    }
  },
  watch: {
    // 'form.logState': function(value) {
    //   if (!value) {
    //     this.form.logState = 2
    //   }
    // }
  },
  computed: {
    ...mapState({
      userId: state => state.user.userId,
      roleId: state => state.user.roleId
    }),
    columns () {
      return [
        {
          title: '课程名称',
          key: 'courseName',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'person'
                }
              }),
              h('strong', params.row.courseName)
            ])
          }
        },
        {
          title: '上课时间',
          key: 'courseStartTime',
          render: (h, params) => {
            return h('div', dateFormat(new Date(params.row.courseStartTime)))
          }
        },
        {
          title: '课程类型',
          key: 'courseType',
          render: (h, params) => {
            return h('div', params.row.courseType == '0' ? '普通教学' : '案例联席')
          }
        },
        {
          title: this.roleId == '3' ? '笔记编写状态' : '日志编写状态',
          key: 'status',
          render: (h, params) => {
            return h('div', params.row.status == '0' ? '未编写' : '已编写')
          }
        },
        {
          title: this.roleId == '3' ? '编辑笔记' : '编辑日志',
          key: 'action',
          width: 150,
          align: 'center',
          render: (h, params) => {
            const edit = this.roleId == '3' ? '编辑笔记' : '编辑日志'
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.row)
                    }
                  }
                },
                edit
              )
              // h(
              //   'Button',
              //   {
              //     props: {
              //       type: 'error',
              //       size: 'small'
              //     },
              //     on: {
              //       click: () => {
              //         this.remove(params.index)
              //       }
              //     }
              //   },
              //   'Delete'
              // )
            ])
          }
        }
      ]
    }
  },
  mounted () {

    this.getDataList()
  },

  methods: {
    // 编辑笔记
    show (row) {
      // this.$Modal.info({
      //   title: 'User Info',
      //   content: `Name：${this.data6[index].name}<br>Age：${
      //     this.data6[index].age
      //   }<br>Address：${this.data6[index].address}`
      // })
      this.$refs.editNotes.init(row)
    },
    // 移除
    remove (index) {
      this.data.splice(index, 1)
    },
    // 点击选项卡
    tabclick () {
      this.currentIndex = arguments[0]
      switch(this.currentIndex){
        case 0:
          this.getDataList()
          break;
        default:
          console.log('点击了tab标签'+this.currentIndex)
      }
    },
    // 重置表单
    resetForm (name) {
      // this.$refs[name].resetFields()
      this.form = {
        courseName: '',
        courseTitle: '',
        time: [],
        status: ''
      }
    },
    // 获取表格数据
    // getDataList() {
    //   const date = []
    //   this.form.time.map(item => {
    //     if (item != '') {
    //       date.push(dateFormat(item))
    //     }
    //   })
    //   this.dataListLoading = true
    //   const params = {
    //     studentId: this.userId,
    //     pageNum: this.pageIndex,
    //     pageSize: this.pageSize
    //     // courseTitle: this.form.name
    //     // time: date,
    //     // status: this.form.status
    //   }
    //   getDataList(params).then(({ data }) => {
    //     if (data && data.code === 0) {
    //       this.data = data.data.data.pageList
    //       this.totalPage = data.data.data.total
    //     } else {
    //       this.data = []
    //       this.totalPage = 0
    //     }
    //     this.dataListLoading = false
    //   })
    // },
    // 获取表格数据查询
    getDataList () {
      if (this.roleId == "3") {
        const date = []
        this.form.time.map(item => {
          if (item != '') {
            date.push(dateFormat(item))
            // date.push(item)
          } else {
            date.push('')
          }
        })
        this.dataListLoading = true
        const params = {
          userId: '' + this.userId,
          pageNum: '' + this.pageIndex,
          pageSize: '' + this.pageSize,
          courseName: '' + this.form.courseName,
          status: this.form.status,
          courseType: this.form.courseType,
          startDate: date[0],
          endDate: date[1]
        }
        getDataList(params).then(({ data }) => {
          if (data) {
            this.data = data.rows
            this.totalPage = data.total
          } else {
            this.data = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      } else if (this.roleId == "2") {
        const date = []
        this.form.time.map(item => {
          if (item != '') {
            date.push(dateFormat(item))
            // date.push(item)
          } else {
            date.push('')
          }
        })
        this.dataListLoading = true
        const params = {
          userId: '' + this.userId,
          pageNum: '' + this.pageIndex,
          pageSize: '' + this.pageSize,
          courseName: '' + this.form.courseName,
          status: this.form.status,
          courseType: this.form.courseType,
          startDate: date[0],
          endDate: date[1]
        }
        queryTeachingJournal(params).then(({ data }) => {
          if (data) {
            this.data = data.rows
            this.totalPage = data.total
          } else {
            this.data = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      }
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getDataList()
    },
    statusClear () {
      // this.form.status = 3
    }
  },
  components: {
    resources2,
    editNotes,
    CourseManagement2
  }
}
</script>
<style lang="scss">
#study {
  width: 100%;
  height: 100%;
  padding: 24px 32px;
  background: #fff;
  box-shadow: 0 4px 8px 0 rgba(7, 17, 27, 0.1);
  border-radius: 12px;
  .ivu-form-item {
    .name {
      width: 200px;
      .ivu-input {
        width: 200px;
      }
    }
  }
  .page {
    text-align: center;
    padding-top: 40px;
  }
}
</style>
